
<template>
  <div style="width: 1200px;margin: 60px auto">
<!--    <el-dding: 0">-->
        <img :src="recipeDetails.image" alt=""
        style="margin: 30px 0;border-radius: 10px">
        <div style="margin: 20px 0"><h1>{{recipeDetails.title}}</h1></div>
        <div>
          <span style="font-size: 27px;color: #FFB31A">{{recipeDetails.pageView}}</span> 浏览
          &nbsp&nbsp&nbsp
          <span style="font-size: 27px;color: #FFB31A">{{recipeDetails.collection}}</span> 收藏
          <el-button type="warning" style="margin-left: 360px;" icon="el-icon-star-off" >收藏</el-button>
        </div>

    <div style="width: 100%;margin-top: 20px">
      <img :src="recipeDetails.authorPic" alt="" style="width: 30px;height: 30px; border-radius: 33px;float: left;margin-right: 3px;vertical-align: middle">
      <p class="author" style="font-size: 15px;color: #333333;display: inline"> by {{recipeDetails.authorNickName}} </p>
      <el-button round style="margin-left: 80px;display: inline">关注</el-button>
    </div>

<!--    正文-->
    <div style="margin: 50px 0;width: 690px">
      <p>
        {{recipeDetails.description}}
      </p>
    </div>

<!--    用料-->
    <div style="margin: 50px 0;">
      <h3 style="margin-bottom: 20px">用料</h3>
      <el-table
          :data="ingredients"
          style="width: 690px">
        <el-table-column
            prop="ingredient"
            label="用料"
            width="180">
        </el-table-column>
        <el-table-column
            prop="amount"
            label="用量">
        </el-table-column>
      </el-table>
    </div>

<!--    做法-->
    <div style="margin: 50px 0">
      <h3 style="margin-bottom: 20px">做法</h3>

<!--      <el-row style="width: 690px;"  >-->
<!--        <el-col :span="8"><div class="grid-content bg-purple">-->
<!--          <div v-for="step in stepImageArr">-->
<!--            <img :src="step" alt="" style="width: 200px;border-radius: 6px">-->
<!--          </div>-->
<!--        </div></el-col>-->
<!--        <el-col :span="16"><div class="grid-content bg-purple-light">-->
<!--          <div style="margin-left: 10px" v-for="(step,index) in stepContentArr" :key="index">-->
<!--            <p style="font-weight: bold;font-size: 15px">步骤{{index+1}}</p>-->
<!--            <p style="color: #333333"> {{step}} </p>-->
<!--          </div>-->
<!--        </div></el-col>-->
<!--      </el-row>-->

      <el-container style="width: 690px;">
        <el-aside width="200px">
          <div v-for="n in stepImageArr" style="height: 205px;">
            <img :src="n" alt="" style="width: 200px;border-radius: 6px">
          </div>
        </el-aside>
        <el-main>
          <div style="margin-left: 30px;height: 205px" v-for="(m,index) in stepContentArr " :key="index">
          <p style="font-weight: bold;font-size: 15px">步骤{{index+1}}</p>
            <p style="color: #333333"> {{m}} </p>
          </div>
        </el-main>
      </el-container>


    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      $:"",
      recipeId:"",
      recipeDetails:[],
      ingredientsArr:[],
      igd:{ingredient:"",
        amount:""},
      ingredients:[
        {
          ingredient:"",
          amount:""
        },
      ],
      stepContentArr:[],
      stepImageArr:[],
    }


  },
  methods: {
    //加载菜谱
    loadRecipe(){
      this.recipeId=this.$router.currentRoute.query.recipeId;
      let url = 'http://localhost:8889/recipe/details?recipeId='+this.recipeId;
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.recipeDetails = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //加载食材表
    loadIngredientsList(){

      this.recipeId=this.$router.currentRoute.query.recipeId;
      console.log("recipeId="+ this.recipeId);

      let url = 'http://localhost:8889/recipe/ingredients?recipeId='+this.recipeId;
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {

          this.ingredientsArr = jsonResult.data;
          console.log(this.ingredientsArr);
          // console.log("this.ingredientsArr  "+this.ingredientsArr);
          for (let i = 0; i < this.ingredientsArr.length; i++) {
            let split = this.ingredientsArr[i].split("=");
            let ingredientObj = {
              ingredient: split[0],
              amount: split[1]
            };
            this.ingredients.push(ingredientObj);
            // this.ingredient.push(split[0]);
            // this.amount.push(split[1]);
          }
          // console.log(this.ingredient);
          // console.log(this.amount);
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  //  加载步骤
    loadStepList(){

      this.recipeId=this.$router.currentRoute.query.recipeId;
      console.log("recipeId="+ this.recipeId);

      let url = 'http://localhost:8889/recipe/step?recipeId='+this.recipeId;
      console.log('url = ' + url);
      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;

        if (jsonResult.state == 20000) {

          let contents=jsonResult.data.content;
          for (let i = 0; i < contents.length; i++) {
            this.stepContentArr.push(contents[i]);
          }
          let images = jsonResult.data.image;
          for (let i = 0; i < images.length; i++) {
            this.stepImageArr.push(images[i]);
          }
          // console.log(this.stepContentArr);
          // console.log(this.stepImageArr);

          }
         else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  },
  mounted() {


    this.loadRecipe();

      this.loadIngredientsList();
      this.loadStepList();
  }
}

</script>

<style>

</style>